<template>
	<view class="">
		<!-- 产品型号选项 -->
		<u-action-sheet :actions="productList" :show="productShow" :closeOnClickAction="true"
			:closeOnClickOverlay="true" @close="productShow = false" @select="productClick"></u-action-sheet>
		<!-- 故障类型选项 -->
		<u-action-sheet :actions="faultList" :show="faultShow" :closeOnClickAction="true" :closeOnClickOverlay="true"
			@close="faultShow = false" @select="faultClick"></u-action-sheet>
		<!-- 操作提示 -->
		<hint-img :show.sync="hintShow" :hintImgType="hintImgType"></hint-img>
		<u-toast ref="uToast"></u-toast>
		<view v-for="(item,index) in afterSale.product" :key="index" class="box_redius type_box" style="padding: 40rpx 20rpx;">
			<view class="flex flex_align pad_bottom">
				<view class="header_star mar_right ">产品型号
				<!-- <text class="five_star iconfont icon-shiwujiaoxing"></text> -->
				</view>
				<view class="model mar_left" @click="openView('productShow',index)">
					<view class="mark iconfont icon-wenhao" @click.stop="hintShowType(1)"></view>
					<u-input :value="item.product_model_id.name" :fontSize="12" placeholder="请选择产品型号" border="surround"
						suffixIcon="arrow-down" disabled>
					</u-input>
				</view>
			</view>
			<view class="flex flex_align mar_top">
				<view class="header_star mar_right">产品SN码
				<!-- <text class="five_star iconfont icon-shiwujiaoxing"></text> -->
				</view>
				<view class="model mar_left">
					<view class="mark iconfont icon-wenhao" @click="hintShowType(0)"></view>
					<u-input v-model="item.serial_number" :fontSize="12" placeholder="请输入序列号" border="surround" customStyle="border:0;backgroundColor:#f5f7fa;">
					</u-input>
				</view>
			</view>
			<view class="flex flex_align mar_top pad_bottom options" @click="openShow('product_name',index)">
				<view class="header_star mar_right">寄回清单
				<!-- <text class="five_star iconfont icon-shiwujiaoxing"></text> -->
				</view>
				<view class="model mar_left model_text" style="padding-right: 0;">
					<text>{{item.product_name.length ? item.product_name.toString() : '请选择寄回清单'}}</text>
				</view>
				<text class="iconfont icon-xiangyoujiantou" style="font-size: 12px;"></text>
			</view>
			<view class="flex flex_align mar_top pad_bottom options" @click="openShow('fault_name',index)">
				<view class="header_star mar_right">故障类型
				<!-- <text class="five_star iconfont icon-shiwujiaoxing"></text> -->
				</view>
				<view class="model mar_left model_text" style="padding-right: 0;">
					<text>{{item.fault_name.length ? item.fault_name.toString() : '请选择故障类型'}}</text>
				</view>
				<text class="iconfont icon-xiangyoujiantou" style="font-size: 12px;"></text>
			</view>
			<view class="flex flex_align mar_top last_options" @click="openFilalShow(index)">
				<view class="header_star mar_right">故障描述
				<!-- <text class="five_star iconfont icon-shiwujiaoxing"></text> -->
				</view>
				<view class="model mar_left model_text" style="padding-right: 0;">
					<text>{{item.fault_desc ? item.fault_desc : '请输入故障描述'}}</text>
				</view>
				<text class="iconfont icon-xiangyoujiantou" style="font-size: 12px;"></text>
				<!-- <view class="model mar_left" style="padding-right: 0;">
					<view class="flex flex_align">
						<view class="textarea">
							<u-textarea v-model="item.fault_desc" height="65" placeholder="请输入描述"></u-textarea>
						</view>
						<view class="upload">
							<u-upload :fileList="item.fileList" @afterRead="((event)=>{afterRead(event,index)})"
								@delete="deletePic" name="1" :maxCount="1" uploadText="上传图片"></u-upload>
						</view>
					</view>
				</view> -->
			</view>
			<view class="mar_top flex flex_cen" v-show="index !== 0">
				<view class="" style="width: 50%;">
					<u-button text="删除" shape="circle" size="small" type="error" @click="deleteBox(index)"></u-button>
				</view>
			</view>
		</view>


		<!-- 寄回清单型-故障类型弹窗 -->
		<options-box :show.sync="oneShow" :checkboxList="optionList" @popupConfirm="popupConfirm" :echoList="echoList" :textType="textType">
		</options-box>

		<!-- 故障描述弹窗 -->
		<u-popup :show="twoShow" @close="twoShow = false" :round="12" :closeable="true">
			<view class="popup_content">
				<view class="top flex flex_align" >
					请输入故障描述<u-icon name="edit-pen-fill" size="18"></u-icon>
				</view>
				<view class="popup">
					<u--textarea v-model="faultObj.fault_desc" placeholder="请填写故障描述" border="none" height="80"
						style="z-index: 1;" maxlength="300" ></u--textarea>
						<view class="text_length">
							<text>{{faultObj.fault_desc.length}}/300</text>
						</view>
					<view class="mar_left mar_bottom">
						<view class="upload">
							<view class=" box box-align-center  upload" style="align-items: flex-end;display: flex;">
								<view class="upload_img" v-if="faultObj.fileList[0].url">
									<text class="iconfont icon-jianhao1 delete" @click="deleteImg"></text>
									<!-- 图片 -->
									<image class="apad_video" :src="faultObj.fileList[0].url"
										mode="aspectFit"></image>
								</view>
								<view class="iconfont icon-zengjia1 icon" @click="locaUpload">
									<text>上传图片</text>
								</view>
							</view>
						</view>
						<!-- <u-upload :fileList="faultObj.fileList" @afterRead="((event)=>{afterRead(event,index)})"
							@delete="deletePic" name="1" :maxCount="3" uploadText="上传图片"></u-upload> -->
					</view>
				</view>
				<view class="mar_top" style="padding: 0 100rpx;">
					<u-button type="primary" text="确定" hairline shape="circle" @click="finalConfirm"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		productList,
		productmodelList,
		faultList
	} from '@/api/product.js'
	import {
		upload
	} from '@/api/Public.js'
	import {
		mapState
	} from 'vuex'
	import hintImg from '@/components/hintImg.vue'
	import optionsBox from '@/components/optonsBox.vue'
	export default {
		components: {
			hintImg,
			optionsBox
		},
		props: {
			checkboxList: {
				type: Array,
				default: []
			},
			productList: {
				type: Array,
				default: []
			},
			faultList: {
				type: Array,
				default: []
			}
		},
		computed: {
			...mapState([
				'afterSale'
			]),
			optionList() {
				return this.optionText === 'product_name' ? this.checkboxList : this.faultList
			}
		},
		data() {
			return {
				productShow: false,
				faultShow: false,
				hintShow: false,
				index: 0,
				hintImgType: true,
				productImage: ['https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/xinghao.png'],
				img: ['https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/kanSn.png'],
				oneShow: false,
				echoList: [],
				optionText: '',
				partIndex: 0,
				twoShow: false,
				faultObj: {
					fault_desc: '',
					fileList: []
				},
				textType:0,
				uploadType:'',
				uploadFlie:''
			}
		},
		created() {
			console.log('组件的created',this.afterSale.product)
		},
		mounted() {

		},
		methods: {
			//寄回清单确定
			popupConfirm(item) {
				console.log(item,'这是确认时的');
				let storeName = ''
				if (this.optionText === 'product_name') {
					//修改寄回清单
					storeName = 'editProduct_name'
				} else {
					//修改故障类型
					storeName = 'editFault_name'
				}
				this.$store.commit(storeName, {
					index: this.partIndex,
					val: item
				})
				this.oneShow = false
			},
			//选择弹出层选项
			openShow(type, index) {
				console.log(type,index,'------------');
				if(type=='product_name'){
					this.textType = 1
				}else{
					this.textType = 2
				}
				this.optionText = type
				this.partIndex = index
				// this.echoList = []
				this.echoList = this.afterSale.product[index][type]
				// console.log(this.afterSale.product[index][type],'回响');
				this.oneShow = true
				this.optionList.forEach((item,i)=>{
					if(item.value.includes('SIM')||item.value.includes('TF')){
						return item['disable'] = true
					}
				})
			},
			//打开故障描述
			openFilalShow(index) {
				this.faultObj.fault_desc = this.afterSale.product[index].fault_desc
				this.faultObj.fileList = this.afterSale.product[index].fileList
				this.partIndex = index
				this.twoShow = true
			},
			//确认故障描述
			finalConfirm() {
				this.$store.commit('editFault_desc', {
					index: this.partIndex,
					val: this.faultObj.fault_desc
				})
				this.twoShow = false
			},
			hintShowType(type) {
				// this.hintShow = true
				uni.previewImage({
					// 先filter找出为图片的item，再返回filter结果中的图片url
					urls: type ? this.img : this.productImage,
					fail() {
						uni.$u.toast('预览图片失败')
					},
				});
			},
			//选取本地相册
			locaUpload(){
				let that = this
				console.log('本地相册');
				uni.chooseMedia({
				  count: 1,
				  mediaType: ['image',],
				  sourceType: ['album', 'camera'],
				  camera: 'back',
				  success(res) {
				    console.log(res)
					that.uploadType = res.tempFiles[0].fileType
					let type = res.tempFiles[0].fileType == 'video' ? '.mp4' : '.png'
					uni.showLoading({
						title: '上传中'
					});
					uni.uploadFile({
							url: 'https://service.jiaoguanyi.com.cn/api/common/upload', // 图片上传
							filePath: res.tempFiles[0].tempFilePath,
							name: 'file',
							header: {
								'token': that.$store.state.token
							},
							success(res) {
								console.log(res)
								let data = JSON.parse(res.data)
								// that.faultObj.fileList  = data.data.url
								// that.repairList.fault_file = data.data.url
								// that.uploadFlie = data.data.fullurl
								that.$store.commit('editFaultImg', {
									url: data.data.url,
									index: that.partIndex,
									fullurl: data.data.fullurl
								})
								that.faultObj.fileList = that.afterSale.product[that.partIndex].fileList
								console.log(that.afterSale.product[that.partIndex].fileList);
								// fault_file_url
							}
						})
						
				  }
				})
			},
			//读取图片 旧方法
			afterRead(event, index) {
				let that = this
				uni.uploadFile({
					url: 'https://service.jiaoguanyi.com.cn/api/common/upload', // 图片上传
					filePath: event.file.url,
					name: 'file',
					header: {
						'token': that.$store.state.token
					},
					success: (res) => {
						let data = JSON.parse(res.data)
						if (data.code === 200) {
							that.$store.commit('editFaultImg', {
								url: data.data.url,
								index: that.partIndex,
								fullurl: data.data.fullurl
							})
							this.faultObj.fileList = this.afterSale.product[that.partIndex].fileList
						} else {
							this.$refs.uToast.show({
								message: data.msg,
								icon: false,
								type: 'error'
							})
						}
					},
					fail: (err) => {
						this.$refs.uToast.show({
							message: err.msg,
							type: 'error',
							icon: false
						})
					}
				});
			},
			// 删除图片
			deletePic(event) {
				this.$store.commit('deletePic', {
					imgIndex: event.index,
					index: this.partIndex
				})
			},
			//删除数据结构
			deleteBox(index) {
				this.$store.commit('deleteBox', index)
			},
			openView(type, index) {
				this.index = index
				this[type] = true
			},
			//点击选择型号
			productClick(item) {
				this.$store.commit('editProductId', {
					item,
					index: this.index
				})
			},
			faultClick(item) {
				this.$store.commit('editFaultId', {
					item,
					index: this.index
				})
			},
			//删除图片
			deleteImg(url) {
				// if (url === 'file') this.uploadType = ''
				this.faultObj.fileList = []
				this.$store.commit('editFaultImg', {
					url: '',
					index: this.partIndex,
					fullurl: ''
				})
				// this.repairList.fault_file=''
				// this.repairList.fault_file_url = ''
				this.uploadType = ''
				this.uploadFlie = ''
			},
		}
	}
</script>

<style scoped>
	.upload /deep/ .u-upload__button {
		margin: 0;
	}
</style>

<style scoped lang="scss">

	.model {
		flex: 1;
		position: relative;
		padding-right: 25rpx;

		.mark {
			position: absolute;
			right: -12rpx;
			top: -12rpx;
			// transform: translateY(-50%);
			font-size: 35rpx;
			color: #999999;
		}
		.textarea {
			width: 70%;
			margin: 0 8px 8px 0;
		}
	}

	.type_box {
		+.type_box {
			margin-top: 20rpx;
		}
		.header_star{
			font-size: 26rpx;
			color: #000;
		}
	}

	.model_text {
		width: 200rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}

	.options {
		border-bottom: 1px solid #f4f4f4;
		height: 50px;
		line-height: 50px;
	}
	.last_options{
		height: 40px;
		line-height: 40px;
	}
	.popup_content {
		padding: 20px 20px 40px 20px;
		.top{
			font-size: 26rpx;
			margin-top: -10rpx;
		}
		.popup {
			position: relative;
			margin-top: 20rpx;
			border: 1px solid #b0b8ef;
			border-radius: 20rpx;
			overflow: hidden;
			.text_length{
				position: absolute;
				right: 20rpx;
				bottom: 25rpx;
				color: #a7a7a7;
				font-size: 24rpx;
			}
		}

		.product {
			.item {
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #E6E6E6;
				text-align: center;
			}

			.option {
				border: 1px solid #E6E6E6;
				padding: 20rpx;
				margin: 0 20px;
				text-align: center;
				border-radius: 12rpx;
			}
		}

		.title {
			border: 1px solid #3c9cff;
			padding: 20rpx;
			letter-spacing: 2px;
			border-radius: 12rpx;
			margin-bottom: 10px;
			color: #3c9cff;
			font-size: 12px;
			min-height: 20px;
			line-height: 20px;
		}
	}
	.upload {
			border-radius: 12px;
			font-size: 25px;
			.icon {
				position: relative;
				display: inline-block;
				font-size: 25px;
				background-color: #f8f8f8;
				border-radius: 12px;
				padding: 28px;
				z-index: 5;
				text{
					    position: absolute;
					    bottom: 10%;
					    left: 50%;
					    transform: translateX(-50%);
					    font-size: 20rpx;
					    color: #717171;
					    width: 100%;
					    text-align: center;
				}
			}
			.upload_img {
				position: relative;
				width: 81px;
				height: 81px;
				margin-right: 40rpx;
				.delete {
					position: absolute;
					background-color: #E5404F;
					color: #fff;
					padding: 10rpx;
					border-radius: 50%;
					top: -10px;
					right: -10px;
					z-index: 2;
				}
			}
			.apad_video {
				height: 81px;
				width: 81px;
				border-radius: 12rpx;
				overflow: hidden;
			}
		}
</style>
